<!--
 * @Description: 
 * @Date: 2025-09-02 16:02:38
 * @LastEditTime: 2025-09-02 16:40:30
-->

<template>
     <van-nav-bar title="客户档案" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="min-h-screen p-4" style=" background-color: #f5f7fa;
            color: #333;">
        <div class="max-w-3xl mx-auto">
           

            <!-- 用户基本信息卡片 -->
            <div class="card p-5 mb-6">
                <h2 class="text-lg font-semibold text-left mb-4 section-title">基本信息</h2>
                <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
                    <div class="text-left">
                        <div class="info-label">年龄</div>
                        <div class="info-value">32岁</div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">在网时长</div>
                        <div class="info-value">5年8个月</div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">终端设备</div>
                        <div class="info-value">iPhone 13 Pro</div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">同证信息</div>
                        <div class="info-value">3个关联号码</div>
                    </div>
                </div>
            </div>

            <!-- 产品信息卡片 -->
            <div class="card p-5 mb-6">
                <h2 class="text-lg font-semibold  text-left mb-4 section-title">产品信息</h2>
                <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
                    <div class="text-left">
                        <div class="info-label">套餐产品</div>
                        <div class="info-value highlight">5G畅享套餐(199元)</div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">状态</div>
                        <div class="info-value">
                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">正常使用</span>
                        </div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">宽带情况</div>
                        <div class="info-value">500M家庭宽带</div>
                    </div>
                    <div class="text-left">
                        <div class="info-label">家庭账户</div>
                        <div class="info-value">主账户(3个子账号)</div>
                    </div>
                </div>
            </div>

            <!-- 消费信息卡片 -->
            <div class="card p-5">
                <h2 class="text-lg font-semibold  text-left mb-4 section-title">消费信息</h2>
                <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
                    <div  class="text-left">
                        <div class="info-label">近6月平均消费</div>
                        <div class="info-value">¥185.50</div>
                    </div>
                    <div  class="text-left">
                        <div class="info-label">全民礼包低消费基准值</div>
                        <div class="info-value highlight">¥150.00</div>
                    </div>
                   
                </div>
            </div>

          
        </div>

    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push("/main");
};

</script>
<style scoped>
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-label {
    color: #666;
    font-size: 14px;
}

.info-value {
    color: #333;
    font-weight: 500;
    font-size: 16px;
}

.highlight {
    color: #3b82f6;
    font-weight: 600;
}

.section-title {
    position: relative;
    padding-left: 12px;
}

.section-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 4px;
    background-color: #3b82f6;
    border-radius: 2px;
}
</style>